<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | Dashboard</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/home/css/bootstrap.min.css">
    <link rel="stylesheet" href="/home/css/AdminLTE.css">
    <link rel="stylesheet" href="/home/css/morris.css">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main content -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>{{$totUserCount}}</h3>

                        <p>用户</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
{{--                    <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>--}}
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>{{$pkCount}}</h3>

                        <p>PK赛</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
{{--                    <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>--}}
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>{{$missionsCount}}</h3>

                        <p>乒乓币发放</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
{{--                    <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>--}}
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>{{$shareCount}}</h3>

                        <p>推广</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
{{--                    <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>--}}
                </div>
            </div>
            <!-- ./col -->
        </div>
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
            <!-- Left col -->
            <section class="col-lg-7 connectedSortable">
                <!-- Custom tabs (Charts with tabs)-->
                <div class="nav-tabs-custom">
                    <!-- Tabs within a box -->
                    <ul class="nav nav-tabs pull-right">
{{--                        <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>--}}
                        <li class="pull-left header"><i class="fa fa-inbox"></i> 平台活跃度新增用户</li>
                    </ul>
                    <div class="tab-content no-padding">
                        <!-- Morris chart - Sales -->
                        <div class="chart tab-pane active" id="revenue-chart"
                             style="position: relative; height: 300px;"></div>
                        <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
                    </div>
                </div>
            </section>
            <!-- /.Left col -->
            <!-- right col (We are only adding the ID to make the widgets sortable)-->
            <section class="col-lg-5 connectedSortable">
                <div class="box box-primary">
                    <div class="box-header">
                        <i class="ion ion-clipboard"></i>

                        <h3 class="box-title">球馆</h3>

                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <!-- See dist//home/js/pages/dashboard.js to activate the todoList plugin -->
                        <ul class="todo-list">
                            @foreach ($sectList as $w)
                                <li>
                                    <span class="text">{{$w->name}}（联系电话：{{$w->tele}} 地址：{{$w->address}}）</span>
                                    <small class="label label-danger"><i class="fa fa-clock-o"></i> {{$w->charge}}元/小时</small>
                                    <div class="tools">
                                        <i class="fa fa-edit"></i>
                                        <i class="fa fa-trash-o"></i>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </div>


            </section>
        </div>

    </section>
</div>
<table class="table table-bordered">
    <tr>
        <td class='title'>擂台赛</td>
    </tr>
    <tr>
        <td>
            <table class="table table-bordered">
                <tr>
                    <td class='title'>擂主</td>
                    <td class='title'>擂台赛名称</td>
                    <td class='title'>报名人数</td>
                    <td class='title'>比赛时间</td>
                </tr>
                @foreach ($arenacontestList as $w)
                    <tr>
                        <td>{{$w->organizerUser->name}}</td>
                        <td>{{$w->title}}</td>
                        <td>{{$w->numcount}}</td>
                        <td>{{$w->game_datetime}}</td>
                    </tr>
                @endforeach
            </table>
        </td>
    </tr>

</table>

<script src="/home/js/echarts.min.js"></script>
<script>
    function getPreviousSevenDays() {
        const today = new Date(); // 当前日期
        const previousSevenDays = [];

        for (let i = 0; i < 7; i++) {
            const previousDate = new Date();
            previousDate.setDate(today.getDate() - (i + 1));
            previousSevenDays.push(previousDate.toLocaleDateString());
        }

        return previousSevenDays;
    }
    var item1 = {{ $item1 }};
    var item2 = {{ $item2 }};
    console.log(item2)
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('revenue-chart'));
        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['小程序']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: getPreviousSevenDays()
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '小程序',
                    type: 'line',
                    stack: 'Total',
                    data: item1
                },
                // {
                //     name: '微信公众号',
                //     type: 'line',
                //     stack: 'Total',
                //     data: item2
                // },
            ]
        };
        myChart.setOption(option);

</script>
</body>
</html>
